<template>
  <div>
    <returnBefore :title="book.name"></returnBefore>
    <div class="top">
      <div class="left">
        <img :src="book.src" alt="" />
      </div>
      <div class="right">
        <div class="r_t">
          <div class="r_t_l">
            <span>{{ book.name }}</span>
          </div>
          <div class="r_t_r">
            <span>{{ book.master }}</span>
          </div>
        </div>

        <div class="center">
          <p class="c_l">都市生活</p>
          <p class="c_r">213142</p>
        </div>
        <div class="star_left">
          <div class="star1">
            <span>完整</span
            ><star
              v-model="value"
              allow-half
              readonly
              void-color="#eee"
              size="14px"
              color="red"
              class="star"
            ></star>
            <span>{{ value }}分</span>
          </div>
          <div class="star2">
            <span>内容</span
            ><star
              v-model="value"
              allow-half
              readonly
              void-color="#eee"
              size="14px"
              color="red"
              class="star"
            ></star>
            <span>{{ value }}分</span>
          </div>
        </div>
        <div class="star_right">
          <div class="star_right_top">
            <!-- todo 管道符进行数据保留二位小数的设置 -->
            {{ value | toFixedTwo }}
          </div>
          <div class="star_right_bot">综合</div>
        </div>
      </div>
    </div>
    <div>
      <van-tabs
        color="green"
        title-active-color="green"
        title-inactive-color="#ccc"

      >
        <van-tab :to="`/bookStore/${currentId}/pages`" title="节目" />
        <van-tab :to="`/bookStore/${currentId}/intro`" title="简介" />
        <van-tab :to="`/bookStore/${currentId}/comment`" title="评论" />
      </van-tabs>
    </div>
    <router-view></router-view>
    <detail-footer :book="book" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentId: "",
      book: "",
      value: 4,
    };
  },
  //过滤器实现保留两位小数
  filters: {
    toFixedTwo(value) {
      const num = parseFloat(value); // 将字符串转换为数字
      if (isNaN(num)) {
        return value;
      }
      return num.toFixed(2);
    },
  },
  //获取id、本地存储之中的内容
  created() {
    this.currentId = this.$route.params.id;
    this.book = JSON.parse(localStorage.getItem("bookDetail"));
    this.value = Number(this.book.star);
  },
};
</script>

<style lang="scss" src="./style.scss" scoped></style>